<template>
  <div id="app">
    <!-- 顶部导航 -->
    <Topbar :key="topbarKey" />
    <!-- 头部nav链接 -->
    <Header />
    <div style="background-color: #f5f5f5;"><router-view /></div>
    <!-- 底部公共部分 -->
    <Footer />

    <!-- 登录 -->
    <Login v-show="isShowModal" />

    <transition name="slide">
      <Toast v-show="isShowToast" />
    </transition>
  </div>
</template>
<script>
// 导入三个组件
import Topbar from "@/components/Topbar.vue";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
// 导入提示框组件
import Toast from "@/components/Toast.vue";

// 登录组件
import Login from "@/components/Login.vue";

// 导入请求数据模块
import { JinPing } from "@/request/api.js";

// 拿到模态登录框组件中的数据
import { mapState } from "vuex";

export default {
  data() {
    return {
      topbarKey: 1,
    };
  },
  components: {
    Topbar,
    Header,
    Footer,
    Login,
    Toast,
  },
  computed: {
    ...mapState({
      isShowModal: (state) => state.showModal.isShowModal,
      isShowToast: (state) => state.showToast.isShowToast,
    }),
  },
  async created() {
    /* 
      可优化点
      1. 请求时，每一次都需要手动的填入域名 http://192.168.113.249:8081/cms
          /products/recommend  如果接口地址发生变化。有几个地方调用就需要改几个组件
          【统一设置请求地址，统一管理所有接口地址 】
      2. 每次都需要手动的携带token  【拦截器】
      3. 如果a完成后才能请求b 【async + await 】
    */
    /*  this.$axios
      .get("http://192.168.113.249:8081/cms/products/recommend")
      .then((res) => {
        console.log("res:", res);
      }); */

    /*  request.get("products/recommend").then((res) => {
      console.log("res555:", res);
    }); */

    /*  JinPing().then((res) => {
      console.log("res888:", res);
    }); */

    let res = await JinPing();
    // console.log("res777:", res);
  },

  watch: {
    "$route.path": {
      handler() {
        // console.log("app-watch111");
        this.topbarKey++;
      },
    },
  },
};
</script>
<style lang="less">
/* 入场的起始状态 = 离场的结束状态 */
.slide-enter,
.slide-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: opacity 0.3s linear;
}

.slide-enter-to,
.slide-leave {
  opacity: 1;
}
</style>
